<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dribbble</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="menu.js"></script>
</head>

<body>
    <header>
        <nav>
            <div class="nav-menu">
                <img src="imgs/icon-menu.svg" alt="" class="menu-btn">
                <img src="imgs/icon-close.svg" alt="" class="close-btn">
                <img src="imgs/logo-black.svg" alt="" class="menu-logo">
            </div>
            <ul>
                <li><a>Inspiration</a></li>                
                <li><a>Find Work</a></li>
                <li><a>Learn Design</a></li>
                <li><a>Go Pro</a></li>
                <li><a>Hire Designers</a></li>
            </ul>
        </nav>

        <div class="nav-logo">
            <a href="#"><img src="imgs/logo-black.svg" alt="" class="logo-black"></a>
        </div>
        <div class="s-btn">
            <div class="signin">Sign in</div>
            <button class="sout-btn">Sing out</button>
        </div>
    </header>

    <div class="menu-container">
        <ul class="menu-list">
            <li><a>Inspiration</a></li>
            <li><a>Find Work</a></li>
            <li><a>Learn Design</a></li>
            <li><a>Go Pro</a></li>
            <li><a>Hire Designers</a></li>
        </ul>
    </div>

    <div class="wrap">
        <div class="notice-bg">
            <div class="notice">
                <div class="text-content">
                    <h1>Discover the world’s top designers &amp; creatives</h1>
                    <p>Dribbble is the leading destination to find &amp;
                        showcase creative work and home to the world's best design professionals.
                    </p>
                    <button class="wrap-sout-btn">Sing out</button>
                </div>
                <div class="shot-content">
                    <picture>
                        <source type="image/webp"
                            srcset="https://cdn.dribbble.com/assets/art-banners/romainbriaux-320w-51a20c877f4deef57fbbb82609ae6d846bcd4129f21e21505371255abb3f2f60.webp 320w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-640w-51a20c877f4deef57fbbb82609ae6d846bcd4129f21e21505371255abb3f2f60.webp 640w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-510w-51a20c877f4deef57fbbb82609ae6d846bcd4129f21e21505371255abb3f2f60.webp 510w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-1100w-e946173753fca7eb4dbd6786ac59e5b66aba2ce29564682b45a074bf0673cff6.webp 1100w"
                            sizes="(max-width: 500px) 320px, 510px">
                        <source type="image/jpeg"
                            srcset="https://cdn.dribbble.com/assets/art-banners/romainbriaux-320w-7b034200ecc8b2e9e5b51a49117ce5ddaa553c6f2defd385727e8fce14e85a03.png 320w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-640w-7b034200ecc8b2e9e5b51a49117ce5ddaa553c6f2defd385727e8fce14e85a03.png 640w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-510w-7b034200ecc8b2e9e5b51a49117ce5ddaa553c6f2defd385727e8fce14e85a03.png 510w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-1100w-97eea970d8685aac38834f53a651aa5d484e2a62ad796f4279462d54ded65ca7.png 1100w"
                            sizes="(max-width: 500px) 320px, 510px">
                        <img srcset="https://cdn.dribbble.com/assets/art-banners/romainbriaux-320w-7b034200ecc8b2e9e5b51a49117ce5ddaa553c6f2defd385727e8fce14e85a03.png 320w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-640w-7b034200ecc8b2e9e5b51a49117ce5ddaa553c6f2defd385727e8fce14e85a03.png 640w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-510w-7b034200ecc8b2e9e5b51a49117ce5ddaa553c6f2defd385727e8fce14e85a03.png 510w, https://cdn.dribbble.com/assets/art-banners/romainbriaux-1100w-97eea970d8685aac38834f53a651aa5d484e2a62ad796f4279462d54ded65ca7.png 1100w"
                            sizes="(max-width: 500px) 320px, 510px" alt="">
                    </picture>
                </div>
            </div>
        </div>
        <div class="wrap-list">
            <ul class="wrap-grid">
                <li>
                    <div class="photo">
                        <img src="imgs/cover-01.jpg" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-01.jpg" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge">PRO</span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-02.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-02.png" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge">TEAM</span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-03.jpg" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-03.jpg" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-04.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-04.gif" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-05.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-05.png" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-06.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-06.jpg" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-07.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-07.png" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-08.jpg" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-08.png" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-09.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-09.jpg" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-10.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-10.png" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-11.jpg" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-11.jpg" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="photo">
                        <img src="imgs/cover-12.png" alt="">
                    </div>
                    <div class="ifo">
                        <div>
                            <img src="imgs/avatar-12.jpg" alt="" class="author">
                            <span>Steve Wolf</span>
                            <span class="badge"></span>
                        </div>
                        <div>
                            <img src="imgs/icon-like.svg" alt="" class="tag">
                            <span>225</span>
                            <img src="imgs/icon-view.svg" alt="" class="tag">
                            <span>32.6k</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>


        <footer>
            <div>
                <div>
                    <a href="#"><img src="imgs/logo-red.svg" alt="" class="logo-red"></a>
                </div>
                <div class="tagline">
                    Dribbble is the world’s leading community for creatives to share, grow, and get hired.
                </div>
            </div>
        </footer>
    </div>
</body>

</html>